﻿<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" href="../layui/css/layui.css" />
    <link rel="stylesheet" href="../css/style.css" />
    <script type="text/javascript" src="../js/jquery1.8.3.js"></script>
    <script type="text/javascript" src="../layui/layui.js"></script>
    <script type="text/javascript" src="../js/js.js"></script>
    <script type="text/javascript" src="//api.map.baidu.com/api?&v=3.0&ak=Vk8xSH1PxwDa1MQk3dTVXruylTQxZtpX"></script>
    <script type="text/javascript" src="//api.map.baidu.com/library/TrackAnimation/src/TrackAnimation_min.js"></script>
    <script type="text/javascript" src="//api.map.baidu.com/library/LuShu/1.2/src/LuShu_min.js"></script>
    <script type="text/javascript" src="//api.map.baidu.com/library/DistanceTool/1.2/src/DistanceTool_min.js"></script>
    <script type="text/javascript" src="//api.map.baidu.com/library/InfoBox/1.2/src/InfoBox_min.js"></script>
    <script type="text/javascript" src="//api.map.baidu.com/library/GeoUtils/1.2/src/GeoUtils_min.js"></script>
    <script type="text/javascript" src="../layui/layui.all.js"></script>
    <script type="text/javascript" src="../js/drag.js"></script>

    <style>
        .bmap {
            width: 100%;
            height: 100%;
        }
        
        body {
            height: 100vh;
            overflow: hidden;
        }
        
        .tool {
            display: flex;
        }
        
        .layer_tool {
            position: fixed;
            z-index: 99;
            top: 60px;
            left: 100px;
            width: 298px;
            height: 65px;
            transition: all .4s;
            background: #1C2C7F;
            border: 1px solid #06A3EB;
            opacity: 0.9;
            border-radius: 17px;
            color: #fff;
            cursor: move;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            box-shadow: 0px 1px 5px 0px rgb(58 73 154 / 32%);
            display: flex;
            justify-content: center;
        }
        
        .layer_tool_item {
            height: 62px;
            width: 62px;
            margin-top: 0px;
            color: #fff;
            cursor: pointer;
        }
        
        .layer_tool_item p {
            font-size: 12px;
            text-align: center;
        }
        
        .layer_tool_item img {
            display: block;
            width: 25px;
            height: 25px;
            margin: 3px auto;
            margin-top: 12px;
        }
        
        .layer_tool_item p {
            font-size: 12px;
            text-align: center;
        }
        
        #video {
            position: absolute;
            bottom: 0;
            height: 400px;
            width: 500px;
            z-index: 99999;
            background: #1B5497;
            box-shadow: 0 2px 10px;
            margin: 0 auto;
        }
        
        .ocx {
            width: 100%;
            height: 100%;
        }
        
        .dialog-title {
            color: #fff;
            background-size: 100% 100%;
            font-size: 12pt;
            cursor: move;
        }
        
        .videotitle {
            position: absolute;
            left: 10px;
            top: 5px;
            color: #FFF;
            font-size: 16px;
        }
        
        .infoBoxContent .title {
            font-size: 14px;
            font-weight: bold;
            line-height: 25px;
        }
        
        .infoBoxContent p b {
            width: 60px;
            display: inline-block;
            text-align-last: justify;
            text-align: justify;
            text-justify: distribute-all-lines;
        }
        
        .infoBoxContent p i {
            display: inline-block;
            width: 11px;
        }
        
        .infoBoxContent_title {
            height: 40px;
            line-height: 40px;
            background-color: #4556B6;
            color: #fff;
            padding-left: 20px;
        }
        
        .infoBox-content {
            color: #e1e1e1;
            padding: 10px 20px 20px 20px;
        }
        
        .infoBoxContent:before {
            content: '';
            width: 0;
            height: 0;
            border: 17px solid transparent;
            border-top-color: #031c32;
            position: absolute;
            left: 50%;
            top: 100%;
            margin-left: -20px;
        }
        
        .contact-map-wrapper {
            position: relative;
            width: 100%;
            height: 582px;
        }
        
        .contact-map {
            height: 100%;
            width: 100%;
        }
        
        .contact-map-wrapper #r-result {
            position: absolute;
            top: 0;
            left: 0;
            margin: 16px;
            height: 30px;
            width: 280px;
        }
        
        .contact-map-wrapper #r-result input {
            height: 100%;
            width: 100%;
            line-height: 30px;
            background-color: #fff;
            padding: 0 8px;
            font-size: 14px;
        }
        
        #r-result {
            position: fixed;
            top: 68px;
            height: 50px;
            left: 413px;
            width: 200px;
            background: #1C2C7F;
            opacity: 0.9;
            text-align: center;
            line-height: 50px;
        }
        
        .layui-tab-content {
            padding: 10px;
            background: #1C2C7F;
            opacity: 0.9;
        }
        
        #r-result input:focus {
            border: 1px solid #3385ff;
        }
        
        #r-result input::-webkit-input-placeholder {
            color: #999999;
        }
        
        #r-result input::-moz-placeholder {
            color: #999999;
        }
        
        #r-result input:-ms-input-placeholder {
            color: #999999;
        }
        
        .layui-tab-title {
            position: relative;
            left: 0;
            height: 40px;
            white-space: nowrap;
            font-size: 0;
            border-bottom-width: 1px;
            border-bottom-style: solid;
            transition: all .2s;
            -webkit-transition: all .2s;
            color: #fff;
        }
    </style>
</head>

<body>
    <div class="bmap" id="allmap">
    </div>
    <div class="layer_tool">
        <!--<p>
            <input id="startBtn" type="button" onclick="startTool();" value="开始选取区域" />
            <input type="button" onclick="map.clearOverlays();document.getElementById('info').innerHTML = '';points=[];" value="清除" />
        </p>
        <div id="info"></div>-->
        <!--<div class="tree_type_item_tool" style="float:none"><i></i>工具栏</div>-->
        <div class="layer_tool_item" id="startBtn" onclick="startTool();">
            <p>
                <img src="../img/zhdd/tool10.png" /></p>
            <p>
                框选</p>
        </div>
        <div class="layer_tool_item" onclick="markAll()">
            <p>
                <img src="../img/zhdd/tool7.png" /></p>
            <p>
                显示</p>
        </div>
        <div class="layer_tool_item" onclick="markPoint()">
            <p>
                <img src="../img/zhdd/tool8.png" /></p>
            <p>
                标点</p>
        </div>
        <div class="layer_tool_item" onclick="clearAll()">
            <p>
                <img src="../img/zhdd/tool9.png" /></p>
            <p>
                清屏</p>
        </div>
        <div class="layer_tool_item" onclick="dragAll()">
            <p>
                <img src="../img/zhdd/bj.png" /></p>
            <p>
                移动</p>
        </div>
    </div>

    <div id="r-result">
        <div class="layui-tab layui-tab-brief">
            <ul class="layui-tab-title">
                <li class="layui-this">地点搜索</li>
                <li>设备搜索</li>
            </ul>
            <div class="layui-tab-content" style="height: 100px;">
                <div class="layui-tab-item layui-show">
                    <input type="text" style="border-radius: 4px;
                    height: 20px;" id="suggestId" size="20" value="百度" placeholder="搜地点、查公交、找路线" />
                </div>
                <div class="layui-tab-item">

                    <input type="text" style="border-radius: 4px;
                    height: 20px;width: 70%;" id="deviceId" size="20" placeholder="搜设备" />
                    <button class="layui-btn layui-btn-normal layui-btn-xs" id="search" style="float: right;
                    /* height: 39px; */
                    margin-top: 13px;">搜索</button>
                </div>
            </div>
        </div>

    </div>
    <div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div>

    <div class="alert layui-form" id="yhmember" lay-filter="yhmember" style="display: none;">
        <div class="alert_content">
            <div class="layui-form-item" style="visibility: hidden; height: 0px; overflow: hidden;">
                <div class="layui-inline">
                    <label class="layui-form-label">
                        经度：
                    </label>
                    <div class="layui-input-inline">
                        <input type="text" autocomplete="off" id="longitude" name="longitude" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">
                        纬度：
                    </label>
                    <div class="layui-input-inline">
                        <input type="text" autocomplete="off" id="latitude" name="latitude" class="layui-input">
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-inline" style="width: 98%;">
                    <label class="layui-form-label">
                        设备：
                    </label>
                    <div class="layui-input-inline">
                        <select name="ID" lay-filter="ID" lay-search>
                        </select>
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-inline" style="width: 98%;">
                    <label class="layui-form-label">
                        设备名称：
                    </label>
                    <div class="layui-input-inline">
                        <input type="text" name="Name" id="Name" autocomplete="off" class="layui-input">
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-inline" style="width: 98%;display: none;">
                    <label class="layui-form-label">
                        状态：
                    </label>
                    <div class="layui-input-inline">
                        <input type="text" name="isOnLine" id="isOnLine" autocomplete="off" class="layui-input" disabled="disabled">
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-inline" style="width: 98%;">
                    <label class="layui-form-label">
                        父节点ID：
                    </label>
                    <div class="layui-input-inline">
                        <input type="text" name="ParentID" id="ParentID" autocomplete="off" class="layui-input" disabled="disabled">
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-inline" style="width: 98%;">
                    <label class="layui-form-label">
                        备注：
                    </label>
                    <div class="layui-input-inline">
                        <input type="text" name="Remark" id="Remark" autocomplete="off" class="layui-input" disabled="disabled">
                    </div>
                </div>
            </div>
            <div class="layui-form-item" style="display: none">
                <div class="layui-inline" style="width: 98%;">
                    <label class="layui-form-label">
                        拓展字段：
                    </label>
                    <div class="layui-input-inline">
                        <input type="text" name="Def" id="Def" autocomplete="off" class="layui-input" disabled="disabled">
                    </div>
                    <div class="layui-input-inline">
                        <input type="text" name="ID" id="ID" autocomplete="off" class="layui-input" disabled="disabled">
                    </div>
                    <div class="layui-input-inline">
                        <input type="text" name="SysID" id="SysID" autocomplete="off" class="layui-input" disabled="disabled">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="alert layui-form" id="table" lay-filter="table" style="display: none;width:900px;height:100px">
        <table class="layui-hide" id="test" lay-filter="test">
        </table>
    </div>
</body>

</html>
<script type="text/html" id="barDemo1">
    {{# if(IsNotNullOrEmpty(d.longitude) && IsNotNullOrEmpty(d.latitude)){ }}
    <a style="color:lightseagreen" lay-event="Detail">查看位置</a> {{# } }}
</script>
<script type="text/javascript">
    var map;
    var mydis;
    map = new BMap.Map("allmap");
    map.centerAndZoom(new BMap.Point(114.051584, 22.70062), 14); // 初始化地图,设置中心点坐标和地图级别
    map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
    var scaleCtrl = new BMap.ScaleControl(); // 添加比例尺控件
    map.addControl(scaleCtrl);
    map.setMapStyleV2({
        styleId: 'deebd18f8d02f9fc132876f2ed822d9e'
    });
    mydis = new BMapLib.DistanceTool(map);
    //搜索
    function G(id) {
        return document.getElementById(id);
    }
    var ac = new BMap.Autocomplete( //建立一个自动完成的对象
        {
            "input": "suggestId",
            "location": map
        });
    ac.addEventListener("onhighlight", function(e) { //鼠标放在下拉列表上的事件 
        var str = "";
        var _value = e.fromitem.value;
        var value = "";
        if (e.fromitem.index > -1) {
            value = _value.province + _value.city + _value.district + _value.street + _value.business;
        }
        str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;
        value = "";
        if (e.toitem.index > -1) {
            _value = e.toitem.value;
            value = _value.province + _value.city + _value.district + _value.street + _value.business;
        }
        str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;
        G("searchResultPanel").innerHTML = str;
    });
    var myValue;
    ac.addEventListener("onconfirm", function(e) { //鼠标点击下拉列表后的事件 
        var _value = e.item.value;
        myValue = _value.province + _value.city + _value.district + _value.street + _value.business;
        G("searchResultPanel").innerHTML = "onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue;
        setPlace();
    });

    function setPlace() {
        //map.clearOverlays(); //清除地图上所有覆盖物
        function myFun() {
            var pp = local.getResults().getPoi(0).point; //获取第一个智能搜索的结果 
            map.centerAndZoom(pp, 18);
            map.addOverlay(new BMap.Marker(pp)); //添加标注
        }
        var local = new BMap.LocalSearch(map, { //智能搜索
            onSearchComplete: myFun
        });
        local.search(myValue);
    }

    var key = 1; //开关
    var newpoint; //一个经纬度点
    var points = []; //数组，放经纬度信息
    var polyline = new BMap.Polyline(); //折线覆盖物
    var polygon;


    function startTool() { //开关函数
        clearAll();
        map.addEventListener("click", mapclick);
        map.addEventListener("dblclick", mapdoubleclick);
    }

    $("#search").on("click", function() {
        var Name = $("#deviceId").val();
        var testTable = layui.table.render({
            elem: '#test',
            //url: yingjiUrl + 'GetFlow_BillwithEvent',
            url: baseUrl + "getDevice&timestamp=" + new Date().getTime(),
            height: '250',
            cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
                ,
            where: {
                "Name": Name
            },
            cols: [
                [{
                    field: 'Name',
                    width: 150,
                    title: '设备名称',
                    align: 'center',
                }, {
                    field: 'SysID',
                    width: 150,
                    title: 'SysID',
                    align: 'center',
                }, {
                    field: 'isOnline',
                    width: 160,
                    title: '状态',
                    align: 'center',
                    templet: function(d) {
                        if (d.isOnline == false) {
                            return '<span class="layui-badge layui-bg-orange">离线</span>'
                        } else {
                            return '<span class="layui-badge layui-bg-blue">在线</span>'
                        }
                    }
                }, {
                    field: 'Remark',
                    width: 100,
                    title: '备注',
                    align: 'center'
                }, {
                    fixed: 'right',
                    width: 300,
                    title: '操作',
                    align: 'center',
                    toolbar: '#barDemo1'
                }]
            ],
            page: false
        });
        layui.table.on('tool(test)', function(obj) {
            var data = obj.data;
            if (obj.event == "Detail") {
                map.centerAndZoom(new BMap.Point(data.longitude, data.latitude), 15);
            }
        })
        layui.layer.open({
            title: "设备信息",
            type: 1,
            area: ['900px', '350px'],
            closeBtn: 1,
            content: $('#table') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
                ,
            cancel: function(index, layero) {
                layer.close(index)
            }
        });

    })

    function mapclick(e) {
        newpoint = new BMap.Point(e.point.lng, e.point.lat);
        //    if(points[points.length].lng==points[points.length-1].lng){alert(111);}
        var markerhead = new BMap.Marker(newpoint); // 创建标注
        map.addOverlay(markerhead); // 将标注添加到地图中

        points.push(newpoint); //将新增的点放到数组中
        polyline.setPath(points); //设置折线的点数组
        map.addOverlay(polyline); //将折线添加到地图上
        //document.getElementById("info").innerHTML += "new BMap.Point(" + e.point.lng + "," + e.point.lat + "),</br>";    //输出数组里的经纬度
    }

    function mapdoubleclick(e) {
        map.disableDoubleClickZoom(); //关闭双击放大
        polygon = new BMap.Polygon(points);
        map.addOverlay(polygon); //将折线添加到地图上
        map.removeEventListener("click", mapclick);
        map.removeEventListener("dblclick", mapdoubleclick);
        $.ajax({
            url: baseUrl + "getDevice&timestamp=" + new Date().getTime(),
            method: "get",
            dataType: "json",
            success: function(res) {
                var data = res.data;
                var mkr = new Array();
                for (var k = 0; k < res.data.length; k++) {
                    var pointInfo = res.data[k];
                    mkr[k] = new BMap.Marker(new BMap.Point(res.data[k].longitude, res.data[k].latitude));
                    InOrOutPolygon(res.data[k].longitude, res.data[k].latitude, mkr[k], pointInfo);
                }
            }
        })
    }
    map.addEventListener("click", mapclick);
    map.addEventListener("dblclick", mapdoubleclick);

    function InOrOutPolygon(lng, lat, mk, pointInfo) {
        var pt = new BMap.Point(lng, lat);
        var result = BMapLib.GeoUtils.isPointInPolygon(pt, polygon);
        if (result) { //在内部，把该点显示在地图上
            var img = v.isOnLine == true ? "../img/zhdd/video.png" : "../img/zhdd/videooffline.png";
            var myIcon = new BMap.Icon(img, new BMap.Size(45, 45));
            myIcon.setImageSize(new BMap.Size(45, 45));
            // 创建点标记
            var mk = new BMap.Marker(new BMap.Point(lng, lat), {
                icon: myIcon
            });

            mk.setPosition(pt);
            map.addOverlay(mk);

            var sContent =
                '<ul style="margin:0 0 5px 0;padding:0.2em 0">' +
                '<li style="line-height: 26px;font-size: 15px;">' +
                '<span style="width: 100px;display: inline-block;">摄像机名称：</span>' + v.Name + '</li>' +
                '<li style="line-height: 26px;font-size: 15px;">' +
                '<span style="width: 100px;display: inline-block;">经度：</span>' + v.longitude + '</li>' +
                '<li style="line-height: 26px;font-size: 15px;">' +
                '<span style="width: 100px;display: inline-block;">纬度：</span>' + v.latitude + '</li>' +
                '<li style="line-height: 26px;font-size: 15px;">' +
                '<span style="width: 100px;display: inline-block;">在线状态：</span>' + v.isOnLine == 'true' ? "在线" : "离线" + '</li>' +
                '<li style="line-height: 26px;font-size: 15px;">' +
                '<span style="width: 100px;display: inline-block;">备注：</span>' + v.Remark + '</li>' +
                '</ul>';
            mk.addEventListener("rightclick", function(e) {
                layer.confirm("确定删除吗", function() {
                    var data = v;
                    v.longitude = "";
                    v.latitude = "";
                    $.ajax({
                        data: data,
                        url: baseUrl + "AddDevice",
                        method: "post",
                        dataType: "json",
                        success: function(res) {
                            layer.msg("OK");
                            clearAll();
                            markAll();
                        }
                    })
                })
            });
            var infoWindow = infoWindows(map, v.Name, sContent);
            // marker添加点击事件
            mk.addEventListener('mouseover', function() {
                infoWindow.open(marker1);
            });
            mk.addEventListener('mouseout', function() {
                infoWindow.close(marker1);
            });
            mk.addEventListener('dblclick', function() {

                //视频播放
                window.external.OpenVideo(pointInfo.ID, pointInfo.SysID);
            });
        } else {
            //不在内部
            //var i = 0;
            //mk.setPosition(pt);
            //map.addOverlay(mk);
        }
    }

    $(function() {
            clearAll();
            //markAll();
            $('.layer_tool').mousedown(function(e) {
                var offset = $(this).offset();
                this.posix = {
                    'x': e.pageX - offset.left,
                    'y': e.pageY - offset.top
                };
                $.extend(document, {
                    'move': true,
                    'move_target': this
                });
            })
        })
        //鼠标移出
    $(document).mousemove(function(e) {
        if (!!this.move) {
            var posix = !document.move_target ? {
                    'x': 0,
                    'y': 0
                } : document.move_target.posix,
                callback = document.call_down || function() {
                    $(this.move_target).css({
                        'top': e.pageY - posix.y,
                        'left': e.pageX - posix.x
                    });
                };

            callback.call(this, e, posix);
        }
    }).mouseup(function(e) {
        if (!!this.move) {
            var callback = document.call_up || function() {};
            callback.call(this, e);
            $.extend(this, {
                'move': false,
                'move_target': null,
                'call_down': false,
                'call_up': false
            });
        }
    });

    function markAll() {
        clearAll();
        map.removeEventListener("click", clickfunc)
        map.clearOverlays();
        $.ajax({
            url: baseUrl + "getDevice&timestamp=" + new Date().getTime(),
            method: "get",
            dataType: "json",
            success: function(res) {
                var data = res.data;
                $.each(data, function(k, v) {
                    var img = v.isOnLine == true ? "../img/zhdd/video.png" : "../img/zhdd/videooffline.png";
                    var myIcon = new BMap.Icon(img, new BMap.Size(45, 45));
                    myIcon.setImageSize(new BMap.Size(45, 45));
                    // 创建点标记
                    var marker1 = new BMap.Marker(new BMap.Point(v.longitude, v.latitude), {
                        icon: myIcon
                    });

                    // 在地图上添加点标记
                    map.addOverlay(marker1);
                    //marker1.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
                    // marker添加点击事件

                    var sContent =
                        '<ul style="margin:0 0 5px 0;padding:0.2em 0">' +
                        '<li style="line-height: 26px;font-size: 15px;">' +
                        '<span style="width: 100px;display: inline-block;">摄像机名称：</span>' + v.Name + '</li>' +
                        '<li style="line-height: 26px;font-size: 15px;">' +
                        '<span style="width: 100px;display: inline-block;">经度：</span>' + v.longitude + '</li>' +
                        '<li style="line-height: 26px;font-size: 15px;">' +
                        '<span style="width: 100px;display: inline-block;">纬度：</span>' + v.latitude + '</li>' +
                        '<li style="line-height: 26px;font-size: 15px;">' +
                        '<span style="width: 100px;display: inline-block;">在线状态：</span>' + v.isOnLine == 'true' ? "在线" : "离线" + '</li>' +
                        '<li style="line-height: 26px;font-size: 15px;">' +
                        '<span style="width: 100px;display: inline-block;">备注：</span>' + v.Remark + '</li>' +
                        '</ul>';
                    RightClickMaker(marker1, new BMap.Point(v.longitude, v.latitude), v);
                    var infoWindow = infoWindows(map, v.Name, sContent);
                    var opts = {
                        position: new BMap.Point(v.longitude, v.latitude), // 指定文本标注所在的地理位置
                        offset: new BMap.Size(-20, -65) // 设置文本偏移量
                    };
                    // 创建文本标注对象
                    var label = new BMap.Label(v.Name, opts);
                    var color
                    if (v.isOnLine != null && v.IsOutOfSize) {
                        color = "#ff4d4d"
                    } else {
                        color = "blue"
                    }
                    // 自定义文本标注样式
                    label.setStyle({
                        color: color,
                        borderRadius: '5px',
                        borderColor: '#ccc',
                        padding: '10px',
                        fontSize: '12px',
                        height: '15px',
                        lineHeight: '15px',
                        fontFamily: '微软雅黑',
                        backgroundColor: 'rgba(255,255,255,0.8)'
                    });
                    map.addOverlay(label);
                    // marker添加点击事件
                    // marker1.addEventListener('mouseover', function() {
                    //     infoWindow.open(marker1);
                    // });
                    // marker1.addEventListener('mouseout', function() {
                    //     infoWindow.close(marker1);
                    // });

                    marker1.addEventListener('dblclick', function() {

                        window.external.OpenVideo(v.ID, v.SysID);

                    });

                })
            }
        })
    }

    function markEditAll() {
        clearAll();
        map.removeEventListener("click", clickfunc)
        map.clearOverlays();
        $.ajax({
            url: baseUrl + "getDevice&timestamp=" + new Date().getTime(),
            method: "get",
            dataType: "json",
            success: function(res) {
                var data = res.data;
                $.each(data, function(k, v) {
                    var img = v.isOnLine == true ? "../img/zhdd/video.png" : "../img/zhdd/videooffline.png";
                    var myIcon = new BMap.Icon(img, new BMap.Size(45, 45));
                    myIcon.setImageSize(new BMap.Size(45, 45));
                    // 创建点标记
                    var marker1 = new BMap.Marker(new BMap.Point(v.longitude, v.latitude), {
                        icon: myIcon
                    });

                    // 在地图上添加点标记
                    map.addOverlay(marker1);
                    //marker1.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
                    // marker添加点击事件

                    var sContent =
                        '<ul style="margin:0 0 5px 0;padding:0.2em 0">' +
                        '<li style="line-height: 26px;font-size: 15px;">' +
                        '<span style="width: 100px;display: inline-block;">摄像机名称：</span>' + v.Name + '</li>' +
                        '<li style="line-height: 26px;font-size: 15px;">' +
                        '<span style="width: 100px;display: inline-block;">经度：</span>' + v.longitude + '</li>' +
                        '<li style="line-height: 26px;font-size: 15px;">' +
                        '<span style="width: 100px;display: inline-block;">纬度：</span>' + v.latitude + '</li>' +
                        '<li style="line-height: 26px;font-size: 15px;">' +
                        '<span style="width: 100px;display: inline-block;">在线状态：</span>' + v.isOnLine == 'true' ? "在线" : "离线" + '</li>' +
                        '<li style="line-height: 26px;font-size: 15px;">' +
                        '<span style="width: 100px;display: inline-block;">备注：</span>' + v.Remark + '</li>' +
                        '</ul>';

                    var opts = {
                        position: new BMap.Point(v.longitude, v.latitude), // 指定文本标注所在的地理位置
                        offset: new BMap.Size(-20, -65) // 设置文本偏移量
                    };
                    // 创建文本标注对象
                    var label = new BMap.Label(v.Name, opts);
                    var color
                    if (v.isOnLine != null && v.IsOutOfSize) {
                        color = "#ff4d4d"
                    } else {
                        color = "blue"
                    }
                    // 自定义文本标注样式
                    label.setStyle({
                        color: color,
                        borderRadius: '5px',
                        borderColor: '#ccc',
                        padding: '10px',
                        fontSize: '12px',
                        height: '15px',
                        lineHeight: '15px',
                        fontFamily: '微软雅黑',
                        backgroundColor: 'rgba(255,255,255,0.8)'
                    });
                    map.addOverlay(label);
                    RightClickMaker(marker1, new BMap.Point(v.longitude, v.latitude), v);

                    marker1.enableDragging();
                    marker1.addEventListener("dragstart", function(e) {
                        map.removeOverlay(label)
                    })
                    marker1.addEventListener("dragend", function(e) {

                        var p = e.target;
                        layui.form.val("yhmember", v);
                        $("#latitude").val(p.getPosition().lat);
                        $("#longitude").val(p.getPosition().lng);
                        layui.layer.closeAll();
                        var data = layui.form.val("yhmember")
                        data.isOnLine = (data.isOnLine == "true") ? true : false;
                        $.ajax({
                            data: data,
                            url: baseUrl + "AddDevice",
                            method: "post",
                            dataType: "json",
                            success: function(res) {
                                layer.msg("OK");
                                markEditAll();
                            }
                        })

                    });
                    var infoWindow = infoWindows(map, v.Name, sContent);

                    marker1.addEventListener('dblclick', function() {

                        window.external.OpenVideo(v.ID, v.SysID);

                    });

                })
            }
        })
    }

    //显示信息窗口，显示标注点的信息。
    function showInfo(thisMaker, point) {


        var winopts = {
            title: '<h4>' + point.Name + '</h4>', // 信息窗口标题
            enableMessage: true, //设置允许信息窗发送短息
            message: "",
            height: 150,
        }

        var sContent =
            '<ul style="margin:0 0 5px 0;padding:0.2em 0">' +
            '<li style="line-height: 26px;font-size: 15px;">' +
            '<span style="width: 100px;display: inline-block;">摄像机名称：</span>' + point.Name + '</li>' +
            '<li style="line-height: 26px;font-size: 15px;">' +
            '<span style="width: 100px;display: inline-block;">经度：</span>' + point.longitude + '</li>' +
            '<li style="line-height: 26px;font-size: 15px;">' +
            '<span style="width: 100px;display: inline-block;">纬度：</span>' + point.latitude + '</li>' +
            '<li style="line-height: 26px;font-size: 15px;">' +
            '<span style="width: 100px;display: inline-block;">在线状态：</span>' + point.isOnLine == 'true' ? "在线" : "离线" + '</li>' +
            '<li style="line-height: 26px;font-size: 15px;">' +
            '<span style="width: 100px;display: inline-block;">备注：</span>' + point.Remark + '</li>' +
            '</ul>';
        var infoWindow = new BMap.InfoWindow(sContent); // 创建信息窗口对象
        thisMaker.openInfoWindow(infoWindow); //图片加载完毕重绘infowindow
    }

    function markPoint() {
        markEditAll();
        map.removeEventListener("click", clickfunc)
        map.addEventListener('click', clickfunc);
    }

    function dragAll() {
        markEditAll();
    }


    function clickfunc(e) {
        //alert('点击位置经纬度：' + e.point.lng + ',' + e.point.lat);

        map.removeEventListener("click", clickfunc)
        var img = "../img/zhdd/video.png";
        var myIcon = new BMap.Icon(img, new BMap.Size(45, 45));
        myIcon.setImageSize(new BMap.Size(45, 45));
        var point = new BMap.Point(e.point.lng, e.point.lat);
        var marker = new BMap.Marker(point, {
            icon: myIcon
        });
        map.centerAndZoom(point, 15);
        map.addOverlay(marker);
        layui.form.val("yhmember", defaultValue)
        $("#latitude").val(e.point.lat);
        $("#longitude").val(e.point.lng);
        layui.layer.closeAll();

        showlayer();
    }

    function showlayer() {

        layui.layer.open({
            title: "设备信息",
            type: 1,
            area: ['500px', '350px'],
            offset: ["50px", "800px"],
            closeBtn: 1,
            btn: ['确认', '取消'],
            content: $('#yhmember') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
                ,
            yes: function(index, layero) {
                var data = layui.form.val("yhmember")
                data.isOnLine = (data.isOnLine == "true") ? true : false;
                if (!CheckIsNullOrEmpty(data.ID)) {
                    layer.msg("请选择摄像头");
                    return;
                }
                $.ajax({
                    data: data,
                    url: baseUrl + "AddDevice",
                    method: "post",
                    dataType: "json",
                    success: function(res) {
                        layer.msg("OK");
                        markEditAll();
                        layer.close(index)

                    }
                })
            },
            btn2: function(index, layero) {
                //按钮【按钮二】的回调
                layui.form.val("yhmember", defaultValue)
                layer.close(index);

                //return false 开启该代码可禁止点击该按钮关闭
            }
        });
    }

    function clearAll() {
        map.clearOverlays();
        points = [];
        var newpolyline = new BMap.Polyline();
        polyline = newpolyline;
        layui.layer.closeAll();
        map.removeEventListener("click", clickfunc)
        map.removeEventListener("click", mapclick);
        map.removeEventListener("dblclick", mapdoubleclick);
    }
    var defaultValue;
    layui.use(['element', 'table', 'form', 'laydate', 'tree'], function() {

        var element = layui.element;
        var table = layui.table;
        var form = layui.form;
        var laydate = layui.laydate;
        var tree = layui.tree;

        bindSelect2("ID", baseUrl, "getDeviceSelect&timestamp=" + new Date().getTime(), {})
        form.render();
        defaultValue = JSON.parse(JSON.stringify(layui.form.val("yhmember")))
        form.on('select(ID)', function(data) {
            console.log(data.value); //得到被选中的值
            $.ajax({
                data: {
                    "ID": data.value
                },
                url: baseUrl + "getDevice&timestamp=" + new Date().getTime(),
                method: "get",
                dataType: "json",
                success: function(res) {
                    var data = res.data;
                    $("#Name").val(data[0].Name);
                    $("#isOnLine").val(data[0].isOnLine)
                    $("#Remark").val(data[0].Remark)
                    $("#Def").val(data[0].Def)
                    $("#SysID").val(data[0].SysID)
                    $("#ParentID").val(data[0].ParentID)
                    $("#ID").val(data[0].ID)
                    $("#SysID").val(data[0].SysID)
                    layui.form.render();
                }
            })
        });
    })

    function infoWindows(map, title, content) {
        var html = "<div class='infoBoxContent'><div class='infoBoxContent_title'>" + title + "</div><div class='infoBox-content'>" + content + "</div></div>";
        var infoWindow = new BMapLib.InfoBox(map, html, {

            boxStyle: {

                opacity: "0.9",

                background: "#031c32",

                width: "auto",
                "white-space": "nowrap",

                height: "auto"

            },
            offset: new BMap.Size(-10, 40),
            closeIconUrl: "../img/zhdd/nocolor.png",
            closeIconMargin: "10px 10px 0 0",

            enableAutoPan: true

        });
        return infoWindow
    }

    function RightClickMaker(marker, point, data) {
        var watchMarker = function(e, data, marker, point, ee) { //右键查看附近
            //要实现的方法
            layui.form.val("yhmember", data)
            console.log(data)
            showlayer();
        }
        var deleteMaker = function(e, data, marker, point, ee) { //右键查看附近
            layer.confirm("确定要删除吗", function() {
                console.log(data)
                data.longitude = "";
                data.latitude = "";
                $.ajax({
                    data: data,
                    url: baseUrl + "AddDevice",
                    method: "post",
                    dataType: "json",
                    success: function(res) {
                        layer.msg("OK");
                        clearAll();
                        markEditAll();
                    }
                })
            })
        }
        var markerMenu = new BMap.ContextMenu();
        markerMenu.addItem(new BMap.MenuItem('查看', watchMarker.bind(marker, point, data)));
        markerMenu.addItem(new BMap.MenuItem('删除', deleteMaker.bind(marker, point, data)));
        marker.addContextMenu(markerMenu); //给标记添加右键菜单
    }
</script>